[LIFF SDK]CDN版を使いながら、TypeScriptの型定義を利用する方法

吉川@広島です。

npm版よりCDN版を選択する理由

LINEミニアプリやLIFFアプリの開発においてLIFF SDKを利用する際に、

• CDNから読み込んで利用する
• npmパッケージとしてインストールして利用する

の2択があります。

TypeScriptで開発する場合、型定義ファイルを利用したい都合からnpmパッケージをインストールしたいところです。

しかし、現時点（2021/9/3）においてnpm版は

LIFFアプリを開発する | LINE Developers

npmパッケージの試験公開 npmパッケージは、試験的に公開しています。今後、予告なく変更、または削除される可能性があります。

という位置づけのようなので、CDN版に寄せるという判断をすることがあります。

でもnpm版の型定義も利用したい

CDNで読み込んだ場合、グローバルのwindowにliffオブジェクトが生えるので、それを使う形になります。

window.liff.init({liffId: 'xxxxxxxx'})

しかし、TSファイル上でこれを記述するとエディタに型定義エラーが表示されてしまいます。

Property 'liff' does not exist on type 'Window & typeof globalThis'.ts

例えば下のようにしてコンパイルを通すこともできますが、型の恩恵を得ることはできなくなります。

(window as any).liff.init({liffId: 'xxxxxxxx'})

そこで、

• 実際に動作させるのはCDN版だけど、npm版の型定義は利用したい

というニーズが発生します。どうすれば良いでしょうか。

解決法

TypeScript で window 直下にいろいろ生やしたりグローバル変数を定義する | DevelopersIO

こちらを参考に、以下のようにWindowに対する型定義を追加することで解決しました。

import { LiffCore } from '@line/liff/dist/lib/liff'
import { LiffModules } from '@line/liff/dist/lib/core'

declare global {
  interface Window {
    liff: LiffCore & LiffModules
  }
}

CDN版とnpm版のバージョンは一致させる

この方法を用いる場合は、CDN版とnpm版のバージョンが同じになっていることを確認しましょう。

以下はv2.13.0を使う場合の例です。

<script charset="utf-8" src="https://static.line-scdn.net/liff/edge/versions/2.13.0/sdk.js"></script>

npm i @line/[email protected]